<template>
<div class="home-container">
    <van-nav-bar title="标题" class="nav-bar" />
    <h4 class="page-title">热门推荐</h4>

    <van-grid :gutter="10">
        <van-grid-item v-for="value in listdata" :key="value" icon="photo-o" :text="value.name" @click="clickgoods(value.id)" />
    </van-grid>


    <h4 class="page-title">搜索</h4>
    <form action="/">
    <van-search
    v-model="searchdata"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
    />
    </form>


    <van-dropdown-menu  auto-locate>
      <van-dropdown-item v-model="sales" :options="option1" />
      <van-dropdown-item v-model="topid" :options="option2" />
    </van-dropdown-menu>




    <van-pagination v-model="currentPage" :total-items="totalcount" :items-per-page="5" />
    





</div>


</template>




<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";


const listdata = ref([]);


const searchdata = ref(null);


const sales = ref(0);

const topid = ref(0);


const currentPage = ref(1);

const totalcount=ref(0);


const option1 = [
    {
        text: '综合排序',
        value: 0,
    },
    {
        text: '价格升序',
        value: 1,
    },
    {
        text: '价格降序',
        value: 2,
    },
    
];







const option2 = [
    {
        text: '全部类型',
        value: 0,
    },
    {
        text: '家庭清洁',
        value: 1,
    },
    {
        text: '保姆月嫂',
        value: 9,
    },
    {
        text: '放心搬家',
        value: 13,
    },
    {
        text: '管道疏通',
        value: 17,
    },
    {
        text: '开锁换锁',
        value: 19,
    },
   
]






const getlist = () => {
    axios.get(`http://127.0.0.1:8000/rec/rec/?user_id=1`).then((res) => {
        console.log(res);
        listdata.value = res.data.data;
        
    });


}


onMounted(() => {
    getlist();
});


const clickgoods = (id) => {
    axios.post('http://127.0.0.1:8000/rec/bro/',{
        user_id:1,
        goods_id: id
    })
    .then((res) => {
        console.log(res);
    })

};


const onSearch = (val) => {
    console.log(searchdata.value);
    console.log(sales.value);
    console.log(topid.value);

    axios.get(`http://127.0.0.1:8000/rec/search/?name=${searchdata.value}&sales=${sales.value}&topid=${topid.value}&page=${currentPage.value}`).then((res) => {
        console.log(res);
        totalcount.value=res.data.total;

    });

};

const onCancel = () => {
    listdata.value = '';
};



</script>



<style scoped>

.home-container {
  width: 400px;
  height: 700px;
  background: white;
  position: relative;
  left: 50%;
  top: 100px;
  border-radius: 20px;
  transform: translate(-50%);
  display: flex; /* 添加 Flexbox 布局 */
  flex-direction: column; /* 垂直方向排列子元素 */
}

.nav-bar {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}


.page-title {

  margin-top: 30px;
  margin-left: 20px;
}



</style>